Using a jQuery plugin is very straightforward. The first step is to include it in the<head> of the document, making sure that it appears after the main jQuery source file:
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.plugin.js"
type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
<title>Example</title>
</head>
After that, it's just a
matter of including a custom JavaScript file in which we use the
methods that the plugin either creates or extends. Often, we can add a
single line inside our custom file's $(document).ready() method to invoke some action:
$(document).ready(function() {
$('#myID').somePlugin();
});
Many plugins have built-in
flexibility as well, providing a number of optional parameters that we
can set to modify their behavior. We can customize their operation as
much as needed, typically by including a map as the method's argument:
$(document).ready(function() {
$('#myID').somePlugin ({
send: true,
message: 'This plugin is great!'
});
});
The syntax of jQuery
plugins is, typically, quite similar to the syntax of methods within
the jQuery core itself. Now that we've seen how to include a plugin in
a web page, let's take a look at a couple of popular ones.